<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-home"></i> 首页
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="Library">
                <!-- 标题图标 -->
                <div class="wk-icon">
                    <i class="iconfont icon-wenkuba"></i>
                </div>
                <!-- 引导语 -->
                <p class="font-tips">输入文档链接地址即可快速下载文章</p>
                <div class="input-down">
                    <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
                        <el-form-item prop="dwnUrl">
                            <el-input placeholder="http://www..." v-model="dataForm.dwnUrl" class="input-with-select"
                                size="medium" clearable width="700px">
                                <el-button slot="append" class="btn-down" @click="dataFormSubmit()" :loading="loading"
                                    @keyup.enter="dataFormSubmit()">下载文档</el-button>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="contact">
                    <!-- <p>不会使用？点击查看
            <a href="#"
               @click="centerDialogVisible = true">下载教程</a>
          </p> -->
                    <p class="alink">
                        <a :href="gourl" @click="goTaobao()" target="_blank" style="color:#030303;">新账号购买 请点击
                        </a>
                    </p>
                </div>
                <!-- Dialog -->
                <el-dialog title="下载教程" :visible.sync="centerDialogVisible" width="60%" center>
                    <img src="../../assets/down.gif" alt>
                </el-dialog>
            </div>
            <!-- 公告 -->
            <div class="announcement" v-show="remsg">
                <!-- <h4> <i class="iconfont icon-gonggao1"></i>{{msg}}</h4> -->
                <marquee><i class="iconfont icon-gonggao1"></i>{{msg}}</marquee>
            </div>

            <!-- <div class="banner-pz">
        <!-- <div class="E-btn">
          <span @click="fmsg = false">X</span>
        </div>-->
            <!-- <img class="hongbao"
             src="../../assets/erweima.png">
      </div> -->
            <!-- <div class="banner-pz-left"
           v-if="Himg.length > 0"
           v-show="fmsg">
   
        <img class="hongbao"
             :src="Himg">
      </div> -->
            <remote-js src="http://pv.sohu.com/cityjson?ie=utf-8"></remote-js>
        </div>
    </div>
</template>

<script>
    import {
        isURL
    } from "@/utils/validate";
    export default {
        name: "basetable",
        data() {
            var validateisURL = (rule, value, callback) => {
                if (!isURL(value)) {
                    callback(new Error("输入的文档链接地址格式错误"));
                } else {
                    callback();
                }
            };
            return {
                remsg: false,
                msg: "下载记录保留最近两个月.严禁账号共享,机器下载,违者封禁账号.问题反馈QQ群754324373", //百度文库官网正在维护中 目前暂时下载不了 维护完成第一时间开放下载 请稍后尝试
                centerDialogVisible: false,
                Himg: "",
                gourl: "",
                fmsg: true,
                loading: false,
                dataForm: {
                    dwnUrl: ""
                },
                dataRule: {
                    dwnUrl: [{
                            required: true,
                            message: "文档链接地址不能为空",
                            trigger: "blur"
                        },
                        {
                            validator: validateisURL,
                            trigger: "blur"
                        }
                    ]
                }
            };
        },
        created() {
            if (this.msg != '') {
                this.remsg = true;
                // this.announcement()
            }
            // this.redpacket();
        },
        components: {

            'remote-js': {
                render(createElement) {
                    return createElement('script', {
                        attrs: {
                            type: 'text/javascript',
                            src: this.src
                        }
                    });
                },
                props: {
                    src: {
                        type: String,
                        required: true
                    },
                },
            },
        },
        methods: {
            dataFormSubmit() {
                this.$refs["dataForm"].validate(valid => {
                    if (valid) {
                        this.loading = true;
                        this.$http({
                                url: this.$http.adornUrl(`/app/dwn`),
                                method: "post",
                                data: this.$http.adornData({
                                    url: this.dataForm.dwnUrl
                                })
                            })
                            .then(({
                                data
                            }) => {
                                this.loading = false;
                                if (data && data.code === 0) {
                                    this.$message.success("下载成功");
                                    window.location.href = data.dwnUrl;
                                } else {
                                    this.$message.error(data.msg);
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                this.$message.error("请求失败,请重试");
                            });
                    }
                });
            },
            announcement() {
                var self = this;
                setInterval(function () {
                    //定时任务
                    // console.log(self.msg);
                    var first = self.msg.substring(0, 1);
                    var end = self.msg.substring(1);
                    self.msg = end + first;
                }, 600);
            },
            getRandomInt: function (min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min
            },


            goTaobao() {
            
                var cname = returnCitySN['cname'];
         
                //默认的淘宝地址
                var defalutUrl =
                    'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911debo7fW2d&ft=t&id=609183268274';
                if (cname.indexOf("广州") >= 0) {
                    this.gourl = defalutUrl;   

                } else if (cname.indexOf("湖南") >= 0) {
                    this.gourl = defalutUrl;
                } else {

                   this.gourl = 'https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.25911deb1sHYLj&ft=t&id=610159521751';
                    // var random = this.getRandomInt(1, 100)
                    // if (random % 2 == 0) {
                       
                    // } else {
                    //     this.gourl = defalutUrl;
                    // }

                }

            },

            // 红包图片
            redpacket() {
                this.$http({
                    url: this.$http.adornUrl(`/app/getActivityConfig`)
                }).then(res => {
                    this.Himg = res.data.data;
                   
                });
            }
        }
    };

</script>

<style lang="less">
    .table {
        width: 100%;
        height: 90%;

        .container {
            height: 100%;
            position: relative;
            padding-right: 20px;

            .Library {
                margin-top: 150px;
                text-align: center;

                .wk-icon {
                    margin-bottom: 26px;

                    .icon-wenkuba {
                        font-size: 66px;
                        color: #16c79d;
                    }
                }

                .font-tips {
                    color: #16c79d;
                    letter-spacing: 12px;
                    margin-bottom: 36px;
                }

                .input-down {
                    .el-form {
                        width: 50%;
                        transform: translate(50%, 0);
                    }

                    .btn-down {
                        background-color: #16c79d;
                        color: white;
                        font-size: 16px;
                        letter-spacing: 2px;
                    }

                    .el-form-item__error {
                        margin-top: 5px;
                        position: static;
                    }
                }

                .contact {
                    // margin-top: 110px;

                    p {
                        font-size: 14px;
                        color: #999999;
                    }

                    a {
                        color: #16c79d;
                        text-decoration: underline;
                    }

                    .alink {
                        margin-top: 20px;

                        a {
                            font-size: 16px;
                            letter-spacing: 2px;
                        }
                    }
                }

                .el-dialog img {
                    width: 100%;
                }
            }

            // 公告
            .announcement {
                width: 65%;
                height: 60px;
                // background-color: #ccc;
                text-align: center;
                line-height: 60px;
                position: absolute;
                font-size: 18px;
                color: red;
                top: 20px;
                left: 50%;
                transform: translate(-50%, 0);

                .icon-gonggao1 {
                    margin-right: 10px;
                    color: red;
                    font-size: 20px;
                }
            }

            .icon-hongbao1 {
                font-size: 30px;
                margin-right: 10px;
                color: red;
            }

            // 红包广告
            // marquee {
            //   height: 50px;
            //   line-height: 50px;
            //   width: 95%;
            //   background-color: rgba(119, 136, 153, 0.3);
            //   position: absolute;
            //   bottom: 100px;
            //   cursor: pointer;
            // }
            .banner-pz {
                width: 14%;
                height: 55%;
                position: absolute;
                bottom: 50%;
                right: 30px;
                transform: translate(0, 50%);

            }

            .banner-pz-left {
                width: 13%;
                height: 35%;
                position: absolute;
                bottom: 50%;
                left: 30px;
                transform: translate(0, 50%);
            }

            .hongbao {
                width: 100%;
                height: 100%;
                border-radius: 3%;
            }
        }
    }

</style>
